<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPT内容构思辅助工具</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 头部标题 -->
        <header class="header">
            <h1>PPT内容构思辅助工具</h1>
            <p>智能润色、扩写、总结 - 让你的路演内容更专业</p>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 展开按钮（收起状态下显示） -->
            <button id="expandExamples" class="expand-examples-btn" style="display: none;">📖</button>
            
            <!-- 左侧参考案例区域 -->
            <div class="examples-sidebar" id="examplesSidebar">
                <div class="examples-header">
                    <h3>参考案例</h3>
                    <button id="toggleExamples" class="toggle-btn">收起</button>
                </div>
                <div class="examples-content">
                    <div class="example-item">
                        <h4>第一页：PPT内容构思辅助工具概述</h4>
                        <div class="example-text">
                            <p><strong>项目名称：</strong>PPT内容构思辅助工具</p>
                            <p><strong>核心价值：</strong>通过AI技术帮助技术人员快速构思和优化路演内容，让非专业人士也能写出专业的PPT文案。</p>
                            <p><strong>解决问题：</strong>技术人员在准备路演时，往往技术能力强但文案表达能力不足，难以将技术优势转化为有说服力的商业表达。</p>
                            <p><strong>目标用户：</strong>参加黑客松、创业比赛、技术分享的开发者和技术团队。</p>
                            <p><strong>市场机会：</strong>随着技术创业热潮，每年有数万场技术路演需要专业的内容支持。</p>
                        </div>
                    </div>
                    <div class="example-item">
                        <h4>第二页：技术解决方案</h4>
                        <div class="example-text">
                            <p><strong>技术架构：</strong>基于HTML+CSS+JavaScript的纯前端实现，集成智谱GLM-4.5-Flash API。</p>
                            <p><strong>核心功能：</strong></p>
                            <ul>
                                <li>智能润色：将技术描述转化为商业化表达</li>
                                <li>内容扩写：为简单想法补充具体实现细节</li>
                                <li>内容总结：提炼冗长描述的核心要点</li>
                            </ul>
                            <p><strong>竞争优势：</strong>专门针对技术路演场景优化，提供三种专业提示词，无需复杂配置即可使用。</p>
                            <p><strong>产品演示：</strong>左右分栏界面，左侧编辑器输入内容，右侧AI功能一键优化，结果可直接复制使用。</p>
                        </div>
                    </div>
                    <div class="example-item">
                        <h4>第三页：应用价值与发展</h4>
                        <div class="example-text">
                            <p><strong>应用价值：</strong>配合现有ppt-free项目，形成从"内容构思"到"PPT生成"的完整工具链，大幅提升技术团队的路演准备效率。</p>
                            <p><strong>使用场景：</strong>黑客松比赛、创业路演、技术分享会、产品发布会等需要专业表达的场合。</p>
                            <p><strong>技术团队：</strong>由熟悉AI应用和前端开发的工程师开发，专注解决技术人员的实际痛点。</p>
                            <p><strong>发展规划：</strong>
                                <br>• 短期：完善AI提示词，提升内容质量
                                <br>• 中期：支持更多AI模型，增加模板库
                                <br>• 长期：打造技术路演内容的标准化平台
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间编辑器区域 -->
            <div class="editor-section">
                <div class="editor-header">
                    <h2>内容编辑器</h2>
                    <div class="editor-tools">
                        <button id="clearBtn" class="tool-btn">清空</button>
                        <button id="copyBtn" class="tool-btn">复制全部</button>
                    </div>
                </div>
                <textarea 
                    id="contentEditor" 
                    placeholder="在这里输入你的路演内容..."
                    rows="25"
                >我的场景是参加黑客松路演的时候需要ppt，可能是作为程序员，大家没什么ppt技能，做不好ppt。

需求，一个ppt模板，让ai能根据具体的作品调整ppt的内容</textarea>
            </div>

            <!-- 右侧AI功能区域 -->
            <div class="ai-section">
                <!-- AI功能区域收起按钮 -->
                <button id="collapseAiSection" class="collapse-ai-btn">收起</button>
                
                <!-- AI功能按钮 -->
                <div class="ai-functions">
                    <h2>AI辅助功能</h2>
                    <div class="function-buttons">
                        <button id="polishBtn" class="ai-btn polish-btn">
                            <span class="btn-icon">✨</span>
                            <span class="btn-text">润色优化</span>
                            <span class="btn-desc">让表达更专业</span>
                        </button>
                        <button id="expandBtn" class="ai-btn expand-btn">
                            <span class="btn-icon">📝</span>
                            <span class="btn-text">内容扩写</span>
                            <span class="btn-desc">丰富内容细节</span>
                        </button>
                        <button id="summarizeBtn" class="ai-btn summarize-btn">
                            <span class="btn-icon">📋</span>
                            <span class="btn-text">内容总结</span>
                            <span class="btn-desc">提炼核心要点</span>
                        </button>
                    </div>
                </div>

                <!-- API配置区域 -->
                <div class="api-config">
                    <div class="config-header">
                        <h3>API配置</h3>
                        <button id="toggleConfig" class="toggle-btn small">设置</button>
                    </div>
                    <div id="configPanel" class="config-panel" style="display: none;">
                        <div class="config-item">
                            <label for="apiKeyInput">智谱API密钥：</label>
                            <input type="password" id="apiKeyInput" placeholder="请输入你的API密钥" />
                            <button id="saveApiKey" class="save-btn">保存</button>
                        </div>
                        <div class="config-status">
                            <span id="configStatus">未配置</span>
                        </div>
                        <div class="config-help">
                            <p>获取API密钥：<a href="https://open.bigmodel.cn/" target="_blank">智谱AI开放平台</a></p>
                        </div>
                    </div>
                </div>

                <!-- AI结果显示区域 -->
                <div class="ai-result">
                    <div class="result-header">
                        <h3>AI处理结果</h3>
                        <button id="copyResultBtn" class="copy-btn" style="display: none;">复制结果</button>
                    </div>
                    <div id="resultContent" class="result-content">
                        <div class="placeholder">
                            <p>选择编辑器中的文本，然后点击上方AI功能按钮</p>
                            <p>AI将为你提供专业的内容建议</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- AI对话窗口区域 -->
            <div class="chat-section">
                <div class="chat-header">
                    <h3>AI对话</h3>
                    <div class="chat-controls">
                        <button id="exportChatBtn" class="export-btn">导出对话</button>
                        <button id="clearChatBtn" class="clear-btn">清空</button>
                    </div>
                </div>
                <div class="chat-messages" id="chatMessages">
                    <div class="chat-placeholder">
                        <p>💬 开始与AI对话</p>
                        <p>在下方输入框中输入问题，AI将为你提供帮助</p>
                    </div>
                </div>
                <div class="chat-input-area">
                    <div class="chat-input-container">
                        <textarea id="chatInput" placeholder="输入你的问题..." rows="3"></textarea>
                        <button id="sendChatBtn" class="send-btn">发送</button>
                    </div>
                </div>
            </div>
            
            <!-- AI功能区域展开按钮（收起状态下显示） -->
            <button id="expandAiSection" class="expand-ai-btn" style="display: none;">🤖</button>
        </main>

        <!-- 底部信息 -->
        <footer class="footer">
            <p>基于智谱GLM-4.5-Flash API | 配合 <a href="../ppt-free" target="_blank">ppt-free项目</a> 使用效果更佳</p>
        </footer>
    </div>

    <!-- 加载提示 -->
    <div id="loadingModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="loading-spinner"></div>
            <p>AI正在处理中，请稍候...</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>